<template>
  <view class="content">
    <view class="section">
      <view class="section-body">
        <view class="section-0">
          <view class="wrapper">
            <view class="label">施工项目</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写施工项目"
                  v-model="form.sg_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>
        <view class="section-0">
          <view class="wrapper">
            <view class="label">计划时间</view>
            <view class="value">
              <view class="date" @click="showdate(1)">
                <view class="input-body">{{ form.start_time }}</view>
                <view class="iconfont icon-rili"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="section-0">
          <view class="wrapper">
            <view class="label">完成时间</view>
            <view class="value">
              <view class="date" @click="showdate(2)">
                <view class="input-body">{{ form.end_time }}</view>
                <view class="iconfont icon-rili"></view>
              </view>
            </view>
          </view>
        </view>

        <view class="section-0">
          <view class="wrapper">
            <view class="label">联系人</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写联系人"
                  v-model="form.zrr_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>

        <view class="section-0">
          <view class="wrapper wrapper-title">
            <view class="title">问题备注</view>
            <view class="value l-value">
              <view class="textarea">
                <u--textarea
                  :maxlength="-1"
                  placeholderClass="textarea-placeholder"
                  class="textarea-body"
                  placeholder="输入问题描述..."
                  v-model="form.remark"
                  border="null"
                >
                </u--textarea>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="preservation">
      <u-button
        class="preservabtn"
        type="primary"
        text="保存"
        @click="submit"
      ></u-button>
    </view>
    <u-datetime-picker
      @cancel="cancleTime"
      @confirm="getTime"
      :show="show"
      v-model="valTime"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { addFourway, updateFourwayList } from "@/api/zhengchu.js";
export default {
  data() {
    return {
      show: false,
      fileList: [],
      detailID: "",
      valTime: Number(new Date()),
      id: 0,
      form: {
        sg_name: "",
        duty_user_id: "",
        zrr_name: "",
        start_time: "",
        end_time: "",
        remark: "",
        file_id: "",
        mark: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    formatDate(timeStamp) {
      const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      return Y + M + D;
    },
    showdate(parmas) {
      this.show = true;
      this.mark = parmas;
    },
    cancleTime() {
      this.show = false;
    },
    getTime(e) {
      console.log(e);
      const timeStamp = e.value;
      if (this.mark == 1) {
        this.form.start_time = this.formatDate(timeStamp);
      }
      if (this.mark == 2) {
        this.form.end_time = this.formatDate(timeStamp);
      }
      this.show = false;
    },
    //提交
    async submit() {
      //添加按钮  点击确定
      if (this.id) {
        const { data } = await updateFourwayList({
          id: this.detailID,
          ...this.form,
        });
        console.log(data);
        if (data.code == 1) {
          uni.showToast({ title: "修改成功", duration: 1000, icon: "success" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({ title: "修改失败", duration: 1000, icon: "error" });
        }
      } else {
        const { data } = await addFourway({
          project_id: this.curProject.id,
          ...this.form,
        });
        if (data.code == 1) {
          uni.showToast({ title: "添加成功", duration: 1000, icon: "success" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({ title: "添加失败", duration: 1000, icon: "error" });
        }
      }
    },
  },
  onLoad(data) {
    //编辑过来使用添加的页面修改标题
    if (data.id) {
      uni.setNavigationBarTitle({
        title: "四通一平修改",
      });
    }
    this.id = data.id;
    if (data.id) {
      var obj = JSON.parse(data.params);
      console.log(obj, "传递");
      this.detailID = obj.id;
      this.form.sg_name = obj.sg_name;
      this.form.start_time = obj.start_time.substring(0, 10);
      this.form.end_time = obj.end_time.substring(0, 10);
      this.form.zrr_name = obj.zrr_name;
      this.form.remark = obj.remark;
    }
  },
};
</script>

<style lang="scss" scoped>
.section {
  width: 100%;
  background: #2e5efe;

  .section-body {
    padding-top: 40rpx;
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
  }

  .section-0 {
    margin-bottom: 24rpx;
    background-color: #fff;
  }

  .wrapper {
    width: 670rpx;
    margin-left: 40rpx;
    border-radius: 35rpx;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
    padding: 28rpx 40rpx;

    .label {
      width: 135rpx;
      float: left;
      font-size: 26rpx;
      font-weight: bold;
      font-stretch: normal;
      height: 48rpx;
      line-height: 48rpx;
      letter-spacing: 0px;
      color: #46464a;
    }

    .title {
      width: 100%;
      height: 30rpx;
      line-height: 30rpx;
      border-bottom: solid 3rpx #f2f2f0;
      font-size: 26rpx;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0rpx;
      color: #46464a;
      padding-bottom: 28rpx;

      .iconfont {
        float: right;
        font-size: 30rpx;
        color: #46464a;
      }
    }

    .value {
      float: left;
      width: 445rpx;

      .input-2 {
        width: 100%;
        height: 52rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 52rpx;
        position: relative;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.7);
        box-sizing: border-box;
        // padding-left: 20rpx;
        text-align: center;
        color: #0535d6;
        padding-right: 50rpx;

        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }

        .iconfont {
          top: 0;
          position: absolute;
          right: 25rpx;
          line-height: 50rpx;
          color: #1534ce;
          font-size: 28rpx;
        }

        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .audio {
        width: 50rpx;
        height: 50rpx;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
        overflow: hidden;

        float: left;

        .audio-center {
          margin-top: 13rpx;
          margin-left: 13rpx;
          border-radius: 50%;
          width: 24rpx;
          height: 24rpx;
          background-color: #ed451b;
        }

        .audio-center__on {
          animation: scale 2s infinite;
        }

        .audio-center__fin {
          background-color: rgba(0, 0, 0, 0.5);
        }

        @keyframes scale {
          0% {
            transform: scale(1);
            opacity: 1;
          }

          50% {
            transform: scale(1.5);
            opacity: 0.5;
          }

          100% {
            transform: scale(1);
            opacity: 1;
          }
        }
      }

      .fin-tips {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 22rpx;
        color: rgba(0, 0, 0, 0.5);
        float: left;
        margin-left: 20rpx;
      }

      .time {
        position: absolute;
        right: 100rpx;
      }

      .upload-wrap {
        width: 100%;
        min-height: 48rpx;
        border-radius: 20rpx;
        position: relative;

        .file_name {
          padding: 9rpx 0;
          line-height: 30rpx;
          color: #1534ce;
          font-size: 26rpx;
          word-break: break-all;
        }

        .iconfont {
          position: absolute;
          right: 25rpx;
          line-height: 48rpx;
          color: #1534ce;
          font-size: 28rpx;
          top: 2rpx;
        }
      }

      .date {
        width: 100%;
        height: 52rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 48rpx;
        position: relative;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.7);
        box-sizing: border-box;
        // padding-left: 20rpx;
        text-align: center;
        color: #0535d6;
        padding-right: 50rpx;

        .iconfont {
          position: absolute;
          right: 25rpx;
          top: 0rpx;
          font-size: 30rpx;
          color: #0535d6;
        }
      }

      .picker {
        width: 100%;
        height: 48rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 44rpx;

        text {
          font-size: 26rpx;
          letter-spacing: 0rpx;
          color: #46464a;
          margin-left: 28rpx;
        }

        .iconfont {
          float: right;
          font-size: 32rpx;
        }
      }

      .input {
        padding-top: 18rpx;

        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }

        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .textarea {
        width: 100%;
        height: 200rpx;
        line-height: 30rpx;
        .textarea-body {
          box-sizing: border-box;
          width: 100%;
          height: 200rpx;
          border: none;
          padding: 18rpx 0rpx !important;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          /deep/ .u-textarea__field {
            height: auto !important;
            font-size: 25rpx;
          }
        }

        /deep/ .u-textarea--disabled {
          background-color: #fff;
        }

        .textarea-placeholder {
          font-size: 25rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 50rpx;
          letter-spacing: 3rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }

    .l-value {
      width: 100%;
    }
  }
}
.preservation {
  width: 100%;
  height: 115rpx;
  position: fixed;
  bottom: 0rpx;
  right: 0;
  padding-top: 21rpx;
  box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);
  .preservabtn {
    width: 75%;
    margin: auto;
  }
}
</style>
